<!DOCTYPE html>
<html class="" lang="en">
<head  >
    {% include 'twig/common/header/include.twig' %}
    <script src="/dev/lib/bootstrap-paginator/src/bootstrap-paginator.js?v={{_version}}"  type="text/javascript"></script>
    <link rel="stylesheet" href="/dev/css/issue/msg-list.css?v={{_version}}"/>
</head>
<body class="" data-group="" data-page="projects:issues:index" data-project="xphp">
{% include 'twig/common/body/script.twig' %}

<section class="has-sidebar page-layout max-sidebar">
    {% include 'twig/common/body/page-left.twig' %}

    <div class="page-layout page-content-body background-white">
<header class="navbar navbar-gitlab">
    <a class="sr-only gl-accessibility" href="#content-body" tabindex="1">Skip to content</a>
    <div class="container-fluid">
        {% include 'twig/common/body/header-content.twig' %}
    </div>
</header>

<div class="page-with-sidebar">

    <div class="content-wrapper page-with-layout-nav page-with-sub-nav">
        <div class="alert-wrapper">

            <div class="flash-container flash-container-page">
            </div>

        </div>
        <div class=" ">
            <div class="content padding-0" id="content-body">
                <div class="user-profile">
                    <div class="cover-block user-cover-block ">
                        <div class="cover-controls">
                            <a class="btn btn-gray has-tooltip" title="编辑资料" aria-label="Edit profile" href="/user/profile_edit">
                                <i class="fa fa-pencil"></i>
                            </a>
                            <!--<a class="btn btn-gray has-tooltip" title="Subscribe" aria-label="Subscribe" href="/sven.atom?private_token=vyxEf937XeWRN9gDqyXk">
                                <i class="fa fa-rss"></i>
                            </a>-->
                        </div>

                        {% include 'twig/user/common-profile-header.twig' %}

                        <div class="scrolling-tabs-container">
                            <div class="fade-left">
                                <i class="fa fa-angle-left"></i>
                            </div>
                            <div class="fade-right">
                                <i class="fa fa-angle-right"></i>
                            </div>

                            {% set profile_nav='msg_system' %}
                            {% include  'twig/user/common-profile-nav.twig' %}
                        </div>
                    </div>
                    <div class="container-fluid container-limited">
                        <div class="content" id="content-body">
                            <form id="msg_filter_form" action=""  accept-charset="UTF-8" method="get">

                            <input name="page" id="filter_page" type="hidden" value="1">
                            <input name="range" id="filter_range" type="hidden" value="">
                            <input name="order_by" id="filter_order_by" type="hidden" value="id">
                            <input name="sort" id="filter_sort" type="hidden" value="desc">
                            </form>
                            <div class="top-area">
                                <ul class="nav-links">
                                    <li class="nav-li-range active" data-range="all">
                                        <a href="#">全部</a>
                                    </li>
                                    <li class="nav-li-range" data-range="unread">
                                        <a href="#">未读消息<span id="unread_count" style="color: red"></span></a>
                                    </li>
                                    <li class="nav-li-range"  data-range="readed">
                                        <a href="#">已读消息</a>
                                    </li>

                                </ul>
                            </div>
                            <div class="content-list">
                                <div class="panel panel-default panel-small panel-without-border">
                                    <ul class="issues-content-list" id="ul_msgs" style="position: relative;">

                                    </ul>
                                </div>
                                <div class="gl-pagination" id="pagination">

                                </div>
                            </div>

                        </div>
                        <div class="loading-status">
                            <div class="loading hide">
                                <i class="fa fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="float-right-side" id="right_content">



                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</section>
{% verbatim %}
<script type="text/html" id="right_content_tpl">
    <span class="close-float-panel float-right">
                    <i class="fa fa-times"></i>
                </span>

    <div class="issuable-header clearfix" id="issuable-header">
        <h3 class="page-title">
            <span >系统消息</span>
        </h3>

        <div class="issuable-meta">
            由
            <strong>
                <a class="author_link  hidden-xs" href="{{sender_url}}">
                    <img id="sender_avatar" width="24" class="avatar avatar-inline s24 " src="{{sender_avatar}}">
                    <span id="sender_name" class="author has-tooltip"  >{{sender_name}}</span>
                </a>
            </strong>
            于
            <time class="js-time" datetime="{{create_time}}" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="{{create_time_text}}">{{create_time_text}}</time>
            创建
        </div>
    </div>

    <div class="issue-detail detail-page-description">
        <h3 class="issue-detail-title" id="msg_title">{{title}}</h3>

        <div class="description-view" id="msg_content">

        </div>
    </div>
</script>
{% endverbatim %}


{% verbatim %}
<script id="msg_tpl" type="text/html" >

    {{#msgs}}
    <li class="issue-item"  data-id="{{id}}"  >
        <div class="issuable-avatar">
            <span class="list-item-name">
                <img width="26px" height="26px" class=" float-none" title="Masterlab" src="/gitlab/images/logo.png">
            </span>
        </div>
        <div class="issuable-main-info">
            <div class="issue-title title">
        <span class="issue-title-text" dir="auto">
            <a class="responsive_title" data-id="{{id}}" href="#">
                {{title}}
            </a>
        </span>
            </div>
            <div class="issuable-info" style="font-size:12px;font-weight: 400;color:#707070;">
                <span style="color:blueviolet;font-size: 10px">{{sender_name}}</span>
                &nbsp;
                <span class="issuable-authored">
                    <a class="author-link js-user-link  " style="font-size: 10px;color:#707070;"  href="#">
                    <span class="author">{{source}}</span>
                    </a>
                    <span style="color:#ad93ac" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{create_time_text}}">{{create_time_text}}</span>
                </span>
            {{#if_eq readed 0 }}
                <span style="color:#ff0000;font-size: 10px">未读</span>
            {{/if_eq}}
            </div>
        </div>
    </li>

    {{/msgs}}

</script>
{% endverbatim %}
<style>
    text.month-name,
    text.calendar-heatmap-legend-text,
    text.day-initial {
        font-size: 10px;
        fill: #aaaaaa;
        font-family: Helvetica, arial, 'Open Sans', sans-serif
    }
    .day-cell {
        border: 1px solid gray;
    }
    rect.day-cell:hover {
        stroke: #555555;
        stroke-width: 1px;
    }
    .day-cell-tooltip {
        position: absolute;
        z-index: 9999;
        padding: 5px 9px;
        color: #bbbbbb;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.85);
        border-radius: 3px;
        text-align: center;
    }
    .day-cell-tooltip > span {
        font-family: Helvetica, arial, 'Open Sans', sans-serif
    }
    .calendar-heatmap {
        box-sizing: initial;
    }
</style>

<script src="/dev/lib/handlebars-v4.0.10.js" type="text/javascript" charset="utf-8"></script>
<script src="/dev/js/handlebars.helper.js?v={{_version}}" type="text/javascript" charset="utf-8"></script>
<script src="/dev/js/user/msg_system.js" type="text/javascript" charset="utf-8"></script>
<script src="/dev/lib/moment.js" charset="utf-8"></script>
<script type="text/javascript">

    var $msgSystemAjax = null;
    var _user_id = '{{user_id}}';
    $(function() {
        $msgSystemAjax = new MsgSystem( {} );
        $msgSystemAjax.filter(  '/user/fetchMsgSystems', 'msg_tpl',  'ul_msgs' );

        $("#ul_msgs").on("click", ".issue-item", function () {
            $(".float-right-side").show();
            let msg_id = $(this).data('id');
            MsgSystem.prototype.fetch(msg_id);
        });

        $("#content-body").on("click", ".close-float-panel", function () {
            $(".float-right-side").hide();
        });

        $("#ul_msgs").on("click", ".issue-item", function () {
            $(".float-right-side").show();
            let msg_id = $(this).data('id');
            MsgSystem.prototype.fetch(msg_id);
        });
        $('.nav-li-range').bind('click',function () {
            $('.nav-links li').each(function(){
                $(this).removeClass('active');
            });
            $(this).addClass('active');
            let range = $(this).data('range');
            $('#filter_range').val(range);
            $msgSystemAjax.filter(  '/user/fetchMsgSystems', 'msg_tpl',  'ul_msgs' );
        });

    });
</script>

</body>
</html>

